

import React from 'react';
import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useRouter } from 'expo-router';
import { FontAwesome6 } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import styles from './styles';

const SettingsScreen = () => {
  const router = useRouter();

  const handleBackPress = () => {
    if (router.canGoBack()) {
      router.back();
    }
  };

  const handleNotificationSettingsPress = () => {
    router.push('/p-notification_settings');
  };

  const handleAboutUsPress = () => {
    router.push('/p-about_us');
  };

  const handleAccountSecurityPress = () => {
    console.log('跳转到账户安全设置页面');
    // 注释：PRD中未明确定义账户安全页面，仅做UI展示
  };

  const handlePrivacySettingsPress = () => {
    console.log('跳转到隐私设置页面');
    // 注释：PRD中未明确定义隐私设置页面，仅做UI展示
  };

  const handleHelpFeedbackPress = () => {
    console.log('跳转到帮助与反馈页面');
    // 注释：PRD中未明确定义帮助与反馈页面，仅做UI展示
  };

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
        {/* 顶部导航栏 */}
        <View style={styles.header}>
          <TouchableOpacity 
            style={styles.backButton} 
            onPress={handleBackPress}
            activeOpacity={0.7}
          >
            <FontAwesome6 name="arrow-left" size={18} color="#1F2937" />
          </TouchableOpacity>
          <Text style={styles.headerTitle}>设置</Text>
          <View style={styles.headerPlaceholder} />
        </View>

        {/* 设置功能列表 */}
        <View style={styles.settingsSection}>
          <View style={styles.settingsContainer}>
            {/* 通知设置 */}
            <TouchableOpacity 
              style={styles.settingItem} 
              onPress={handleNotificationSettingsPress}
              activeOpacity={0.8}
            >
              <View style={styles.settingItemContent}>
                <View style={styles.settingItemLeft}>
                  <LinearGradient
                    colors={['#969FFF', '#5147FF']}
                    start={{ x: 0, y: 0 }}
                    end={{ x: 1, y: 1 }}
                    style={styles.settingIcon}
                  >
                    <FontAwesome6 name="bell" size={18} color="#FFFFFF" />
                  </LinearGradient>
                  <View style={styles.settingTextContainer}>
                    <Text style={styles.settingTitle}>通知设置</Text>
                    <Text style={styles.settingSubtitle}>管理审批通知方式</Text>
                  </View>
                </View>
                <FontAwesome6 name="chevron-right" size={18} color="#6B7280" />
              </View>
            </TouchableOpacity>

            {/* 关于我们 */}
            <TouchableOpacity 
              style={styles.settingItem} 
              onPress={handleAboutUsPress}
              activeOpacity={0.8}
            >
              <View style={styles.settingItemContent}>
                <View style={styles.settingItemLeft}>
                  <LinearGradient
                    colors={['#60A5FA', '#3B82F6']}
                    start={{ x: 0, y: 0 }}
                    end={{ x: 1, y: 1 }}
                    style={styles.settingIcon}
                  >
                    <FontAwesome6 name="circle-info" size={18} color="#FFFFFF" />
                  </LinearGradient>
                  <View style={styles.settingTextContainer}>
                    <Text style={styles.settingTitle}>关于我们</Text>
                    <Text style={styles.settingSubtitle}>应用版本与版权信息</Text>
                  </View>
                </View>
                <FontAwesome6 name="chevron-right" size={18} color="#6B7280" />
              </View>
            </TouchableOpacity>

            {/* 账户安全 */}
            <TouchableOpacity 
              style={styles.settingItem} 
              onPress={handleAccountSecurityPress}
              activeOpacity={0.8}
            >
              <View style={styles.settingItemContent}>
                <View style={styles.settingItemLeft}>
                  <LinearGradient
                    colors={['#4ADE80', '#22C55E']}
                    start={{ x: 0, y: 0 }}
                    end={{ x: 1, y: 1 }}
                    style={styles.settingIcon}
                  >
                    <FontAwesome6 name="shield-halved" size={18} color="#FFFFFF" />
                  </LinearGradient>
                  <View style={styles.settingTextContainer}>
                    <Text style={styles.settingTitle}>账户安全</Text>
                    <Text style={styles.settingSubtitle}>密码修改与安全设置</Text>
                  </View>
                </View>
                <FontAwesome6 name="chevron-right" size={18} color="#6B7280" />
              </View>
            </TouchableOpacity>

            {/* 隐私设置 */}
            <TouchableOpacity 
              style={styles.settingItem} 
              onPress={handlePrivacySettingsPress}
              activeOpacity={0.8}
            >
              <View style={styles.settingItemContent}>
                <View style={styles.settingItemLeft}>
                  <LinearGradient
                    colors={['#A78BFA', '#8B5CF6']}
                    start={{ x: 0, y: 0 }}
                    end={{ x: 1, y: 1 }}
                    style={styles.settingIcon}
                  >
                    <FontAwesome6 name="user-secret" size={18} color="#FFFFFF" />
                  </LinearGradient>
                  <View style={styles.settingTextContainer}>
                    <Text style={styles.settingTitle}>隐私设置</Text>
                    <Text style={styles.settingSubtitle}>个人信息与数据隐私</Text>
                  </View>
                </View>
                <FontAwesome6 name="chevron-right" size={18} color="#6B7280" />
              </View>
            </TouchableOpacity>

            {/* 帮助与反馈 */}
            <TouchableOpacity 
              style={styles.settingItem} 
              onPress={handleHelpFeedbackPress}
              activeOpacity={0.8}
            >
              <View style={styles.settingItemContent}>
                <View style={styles.settingItemLeft}>
                  <LinearGradient
                    colors={['#FB923C', '#F97316']}
                    start={{ x: 0, y: 0 }}
                    end={{ x: 1, y: 1 }}
                    style={styles.settingIcon}
                  >
                    <FontAwesome6 name="circle-question" size={18} color="#FFFFFF" />
                  </LinearGradient>
                  <View style={styles.settingTextContainer}>
                    <Text style={styles.settingTitle}>帮助与反馈</Text>
                    <Text style={styles.settingSubtitle}>使用帮助与意见反馈</Text>
                  </View>
                </View>
                <FontAwesome6 name="chevron-right" size={18} color="#6B7280" />
              </View>
            </TouchableOpacity>
          </View>
        </View>

        {/* 版本信息 */}
        <View style={styles.versionSection}>
          <View style={styles.versionCard}>
            <LinearGradient
              colors={['#969FFF', '#5147FF']}
              start={{ x: 0, y: 0 }}
              end={{ x: 1, y: 1 }}
              style={styles.versionIcon}
            >
              <FontAwesome6 name="mobile-screen" size={24} color="#FFFFFF" />
            </LinearGradient>
            <Text style={styles.appName}>流批通</Text>
            <Text style={styles.versionText}>版本 1.0.0</Text>
            <Text style={styles.copyrightText}>© 2024 流批通科技有限公司</Text>
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

export default SettingsScreen;

